<template>
	<view class="operateAddress">
		<view class="content">
			<view class="input">
				<p class='p1'>提现到支付宝无手续费，提现到银行卡将收取百分之0.2手续费</p>
			</view>

			<picker :range="data.payTypeList" range-key="name" @change="payTypeChange">
				<view class="select address">
					<text>支付方式</text>
					<text>{{selectChange(data.payTypeList,data.obj.payType)}}</text>
					<image src="/static/img/index/58.png" mode="widthFix"></image>
				</view>
			</picker>

			<view class="input">
				<text>提现金额</text>
				<input v-model="data.num" type="number" :placeholder="data.walletType == 'BALANCE'?('请输入(可提现余额 '+data.walletData.cashBalance+')'):('请输入(可提现保证金 '+data.walletData.bondBalance+')')  " />
			</view>

			<view v-if="data.obj.payType=='ZFB'" class="input">
				<text>支付宝账号</text>
				<input v-model="data.cardNo" type="text" placeholder="请输入提现支付宝号/支付宝手机号" />
			</view>
			<view v-if="data.obj.payType=='ZFB'" class="input">
				<text>支付宝姓名</text>
				<input v-model="data.accountName" type="text" placeholder="请输入支付宝姓名(仅用于核对提现身份)" />
			</view>

			<view v-if="data.obj.payType=='BANK'" class="input">
				<text>银行名称</text>
				<input v-model="data.bankName" type="text" placeholder="请输入收款银行名称" />
			</view>
			<view v-if="data.obj.payType=='BANK'" class="input">
				<text>收款户名</text>
				<input v-model="data.accountName" type="text" placeholder="请输入收款户名" />
			</view>
			<view v-if="data.obj.payType=='BANK'" class="input">
				<text>银行卡号</text>
				<input v-model="data.cardNo" type="text" placeholder="请输入收款银行卡号" />
			</view>
		</view>
		<view @tap="submit" class="bottom">
			提现
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { applyWithdraw, userWallet } from '@/utils/api/wallet.ts'
	import { onLoad } from '@dcloudio/uni-app'
	const data = reactive<any>({
		num: '',
		// bankName:'',
		cardNo: '',
		accountName: '',
		walletData: {},
		canWithdraw: '可提现金额',
		walletType: '',
		obj: { payType: 'ZFB' },
		payTypeList: [{ id: 'ZFB', name: '支付宝' }, { id: 'BANK', name: '银行卡' }],
	})

	const payTypeChange = (e) => {
		data.obj.payType = data.payTypeList[e.detail.value].id;
	}
	const selectChange = (arr, id) => {
		const index = arr.map(item => item.id).indexOf(id);
		if (index == -1) {
			return '请选择'
		}
		return arr[index].name || arr[index].categoryName
	}

	const submit = () => {
		const widthData = {
			data: {
				walletType: data.walletType,
				amount: data.num,
				receiveWay: data.obj.payType,
				bankName: data.bankName,
				cardNo: data.cardNo,
				accountName: data.accountName
			}
		}
		applyWithdraw(widthData).then(res => {
			uni.showToast({
				title: '申请成功,请等待审核',
				icon: 'success'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/purse/purse'
				})
			}, 100)
		})
	}
	function loadWallet() {
		userWallet().then(res => {
			data.walletData = res.data
		})
	}
	loadWallet()

	onLoad((options) => {
		const { walletType } = options;
		data.walletType = walletType
	})
</script>

<style lang="scss">
	.p1 {
		// margin-left: 24rpx;
		// margin-bottom:30rpx;
		background: #fff;
		font-size: 32rpx;
		font-weight: 400;
	}

	.operateAddress {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F4F6FA;
		padding-bottom: 10rpx;

		.content {
			flex: 1;
		}

		.placeholder-class {
			color: #BFBFBF;
		}

		.info {
			// width: 630rpx;
			// margin: 0 auto;
			// margin-top: 30rpx;
			// line-height: 96rpx;
			// text-align: center;
			// border-radius: 80rpx;
			margin-left: 24rpx;
			color: #fff;
			// margin-top: 30rpx;
			font-size: 36rpx;
			background: #6B64D3;
		}

		.input,
		.select,
		.switch {
			padding: 36rpx 32rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 36rpx;
			}

			input {
				flex: 1;
				margin-left: 24rpx;
			}
		}

		.address view {
			width: 100rpx;
			text-align: center;
		}

		.switch {
			margin-top: 24rpx;
		}

		.input {
			text {
				width: 140rpx;
			}
		}

		.select {
			text:nth-of-type(1) {
				width: 120rpx;
			}

			text:nth-of-type(2) {
				flex: 1;
				color: #BFBFBF;
				margin-left: 24rpx;
			}
		}

		.bottom {
			width: 630rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius: 80rpx;
			color: #fff;
			margin-top: 30rpx;
			font-size: 36rpx;
			background: #6B64D3;
		}
	}
</style>